<template>
<div class="feedback abs full">
	<div class="rel full overflow-x-hidden">
		<div class="contact-info">
			<input type="text" placeholder="请输入您的手机号或邮箱" maxlength="30" v-model="phoneNumber">
		</div>
		<div class="feed-info">
			<textarea placeholder="请输入产品功能/系统意见，感谢您的反馈，我们将不断优化体验。" maxlength="100" v-model="feedContent"></textarea>
		</div>
		<div class="feed-submit" @click="opinionSubmit()">提交</div>
	</div>
</div>
</template>

<script>
export default {
	name: 'feedback',
	data() {
		return {
			phoneNumber: '', //手机号
			feedContent: '', //意见内容
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.feedback = this;
	},
	activated() {
		document.title = '意见反馈';
	},
	deactivated() {

	},
	methods: {
		// 提交按钮
		opinionSubmit: function() {
			let that = this;
			// 获取用户ID
			let customerId = this.$util.getCustomerId();
            if(!customerId){
                return;
            }
			// 验证手机或邮箱格式
			var phoneReg = /^1[34578][0-9]{9}$/;
			var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
			if (phoneReg.test(this.phoneNumber) || emailReg.test(this.phoneNumber)) {
				if (this.feedContent != '') {
					// 意见提交
					this.$util.ajax(`/feedback/create`, 'post', {
						customerId: customerId,
						contact: this.phoneNumber,
						content: this.feedContent
					}, 'protect').then(function(data) {
						console.log('意见反馈：');
						console.log(data);
						if(data.code == "100000"){
							that.showToast();
							that.$router.go(-1);
							that.phoneNumber = '';
							that.feedContent = '';
						}
					}).catch(function(err) {
						console.log(err);
					});
				} else {
					this.showToast('请填写意见内容。',"error");
				}
			} else {
				this.showToast('手机号或邮箱为空或填写错误！',"error");
			}
		}
	}
}
</script>

<style scoped>
.feedback {
	background-color: #F7F7F7;
}

.contact-info {
	margin: .5rem 0;
}

.contact-info input,
.feed-info textarea {
	width: 100%;
	height: 1rem;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: none;
	border-right: none;
	box-sizing: border-box;
	padding: .2rem;
	font-size: .3rem;
	outline: none;
	text-align: justify;
}

.contact-info input::-webkit-input-placeholder,
.feed-info textarea::-webkit-input-placeholder {
	color: #C9C9C9;
}

.feed-info {
	width: 100%;
}

.feed-info textarea {
	height: 3.5rem;
}

.feed-submit {
	width: 85%;
	height: 1rem;
	background-color: #4A96FD;
	font-size: .35rem;
	color: #fff;
	border-radius: .15rem;
	text-align: center;
	line-height: 1rem;
	margin: 0 auto;
}
</style>
